<template>
    <div class="push-content-container">
        <div class="push-list" v-if="pushs.length === 1">
            <p class="description">{{pushs[0].content}}</p>
            <a-button type="primary" @click="updatePush(pushs[0].id,1)">确定</a-button>
        </div>
        <div v-if="pushs.length >1" class="more-list">
            <div class="head">
                <p class="description"><span>1/{{pushs.length}}</span>
                <span>{{pushs[0].content}}</span>
                </p>
                <div class="linked-buttons">
                        <a-button type="primary" @click="updatePush(pushs[0].id,1)">确定</a-button>
                    <div class="image" @click="active = !active" :class="{active: active}"></div>
                </div>
                
            </div>
            <transition name="show">
            <div class="tail" v-show="active">
                <div class="push-list" v-for="(v, k) in restPushs">
                    <p class="description"><span>{{k+2}}/{{pushs.length}}</span>
                        <span>{{v.content}}</span>
                    </p>
                    <a-button type="primary" @click="updatePush(v.id,1)">确定</a-button>
                    
                </div>
            </div>
            </transition>
        </div>
        
    </div>
</template>

<script>
    export default {
        name: 'push',
        props: ["task_id"],
        data() {
            return {
                pushs:[],
                active:false,
            }
        },
        computed: {
            restPushs() {
                return this.pushs.slice(1);
            }
        },
        methods: {
            updatePush(id, handle) {
                this.http('put', 'push/update?id=' + id,{status:handle}).then(res => {
                    if (res.status == 200) {
                        this.getPushs()
                        //this.$emit('refresh', this.order.id);
                        if (!res.had_push) {
                            this.$store.dispatch("SetTaskPush", res.had_push);
                        }
                        if(res.msg)
                            this.$message.success(res.msg, 1);
                    } else {
                        this.$message.error(res.msg, 1)
                    }
                })
            },
            async getPushs () {
               let data= await this.http('get', 'push/index', {task_id: this.task_id, status: 0,task_push:1});
                 this.pushs = data.data;
                 if(data.data.length >0){
                     this.$emit('setShowPush')
                 }else{
                     this.$emit('setHidePush')
                 }
            }
        },
        mounted() {
            setTimeout(()=>{this.getPushs()},500)
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    .push-content-container {
        & > .push-list {
            width: 100%;
            padding: 10px 20px;
            @include fj();
            align-items: center;
            border-bottom: 4px solid #1E2026;

            .description {
                max-width: 750px;
                font-size: 16px;
            }

            @media screen and (max-width: 1366px) {
                .description {
                    max-width: 550px;
                }
            }

            .btn-list {
                .ant-btn + .ant-btn {
                    margin-left: 15px;
                }
            }
        }

        & > .more-list {
            position: relative;
            & > .head {
                padding: 10px 20px;
                border-bottom: 4px solid #1E2026;
                @include fj();
                align-items: center;
                width: 100%;

                .description {
                    max-width: 700px;
                    font-size: 16px;
                    @include fj(flex-start);

                    span + span {
                        margin-left: 10px;
                    }
                }

                & > .linked-buttons {
                    @include fj(flex-end);
                    align-items: center;

                    .image {
                        @include wh(30px, 30px);
                        background: url("./../../assets/images/arrow-down.svg") center no-repeat;
                        margin-left: 15px;
                        cursor: pointer;
                        @include transition(transform, .3s, cubic-bezier(0.645, 0.045, 0.355, 1));
                        &.active {
                            transform: rotate(-180deg);
                            -webkit-transform: rotate(-180deg);
                            -moz-transform: rotate(-180deg);
                            -ms-transform: rotate(-180deg);
                            -o-transform: rotate(-180deg);
                        }
                    }

                    .btn-list {
                        .ant-btn + .ant-btn {
                            margin-left: 15px;
                        }
                    }
                }

                @media screen and (max-width: 1366px) {
                    .description {
                        max-width: 550px;
                    }
                }
            }

            & > .tail {
                position: absolute;
                width: 100%;
                background: #293043;
                & > .push-list {
                    padding: 10px 20px;
                    border-bottom: 4px solid #1E2026;
                    @include fj();
                    align-items: center;
                    width: 100%;

                    .description {
                        max-width: 700px;
                        font-size: 16px;
                        @include fj(flex-start);

                        span + span {
                            margin-left: 10px;
                        }
                    }

                    .btn-list {
                        .ant-btn + .ant-btn {
                            margin-left: 15px;
                        }
                    }

                    @media screen and (max-width: 1366px) {
                        .description {
                            max-width: 550px;
                        }
                    }
                }
            }
        }
    }

    .confirm-wrapper {
        width: 100%;
        @include centering;
        padding-top: 20px;
        padding-bottom: 20px;
        flex-flow: column;
        p {
            font-size: 16px;
        }
    }

    .text-area {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .order-change-modal {
        font-size: 16px;
        .add-order-wrapper {
            & > p + p {
                margin-top: 10px;
            }
        }
    }

    .show-enter-active {
        transition: all 0.3s ease;
    }

    .show-leave-active {
        transition: all 0.3s ease;
    }

    .show-enter, .show-leave-to {
        transform: translateY(-10px);
        opacity: 0;
    }
</style>